<!--这是查看详情组件-->
<template>
	<div>
		<div class="addBox">
			<Sticky class="fixTitle" style=" height: 36px;">
				<span>资源详情</span>
			</Sticky>
			<!--这是查看求 场地 详情组件-->
			<div style="width: 800px;margin: 0 auto;" v-show="showOption[0].isShow">
				<div style="padding-top: 10px;">
					<p class="title">编辑 求 场地</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>所求标题:</label><el-input v-model="editData.name" placeholder="请输入所求标题（不超过30个字）" style="width: 350px"></el-input>
					</p>
					<div class="label-p">
						<label for="" style="float: left;"><span style="color: red">*</span>位置要求:</label>
						<v-distpicker :province="citySelect.province" :city="citySelect.city" :area="citySelect.area" style="float: left;"></v-distpicker>
					</div>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>场地类别:</label>
						<el-select  style="width: 350px;" v-model="editData.selectField" placeholder="请选择">
						    <el-option v-for="item in fieldOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>日均费用:</label>
						<el-select  style="width: 350px;" v-model="editData.selectCost" placeholder="请选择">
						    <el-option v-for="item in costOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>需容纳人数:</label><el-input v-model="editData.memberNum" placeholder="请填写容纳人数" style="width: 350px"></el-input>
					</p>
					<p class="label-p" >
						<label for="">场地要求:</label><el-input v-model="editData.fieldIntro" placeholder="请输入场地要求(非必填，不超过100个字)" style="width: 350px;"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>联系人:</label><el-input v-model="editData.contact" placeholder="请填写联系人" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>联系方式:</label><el-input v-model="editData.phone" placeholder="请填写联系方式" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for="">微信号:</label><el-input v-model="editData.wechatNum" placeholder="请填写微信号" style="width: 350px"></el-input>
					</p>
				</div>
			</div>
			
			<!--这是查看求 资金 详情组件-->
			<div style="width: 800px;margin: 0 auto;" v-show="showOption[1].isShow">
				<div style="padding-top: 10px;">
					<p class="title">编辑 求 资金</p>
					<el-upload style="margin: 0 30px"
					  action=""
					  list-type="picture-card"
					  :on-preview="handlePictureCardPreview"
					  :on-remove="handleRemove">
					  <i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>所求标题:</label><el-input v-model="editData.name" placeholder="请输入所求标题（不超过15个字）" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>一句话简介:</label><el-input v-model="editData.intro" placeholder="请输入简介（不超过40个字）" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>需求金额:</label><el-input v-model="editData.capital" placeholder="单位为元" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>融资方式:</label>
						<el-select  style="width: 350px;" v-model="editData.selectType" placeholder="请选择">
						    <el-option v-for="item in typeOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<div class="label-p">
						<label for="" style="float: left;">所在地区:</label>
						<v-distpicker :province="citySelect.province" :city="citySelect.city" :area="citySelect.area" style="float: left;"></v-distpicker>
					</div>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>使用时间:</label>
						<el-date-picker type="datetime" format="yyyy-MM-dd" placeholder="请选择时间" v-model="editData.use_time">
		               </el-date-picker>
					</p>
					<p class="label-p">
						<label for="">所处行业:</label>
						<el-select  style="width: 350px;" v-model="editData.selectTrade" placeholder="请选择">
						    <el-option v-for="item in tradeOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p">
						<label for="">项目所处阶段:</label>
						<el-select  style="width: 350px;" v-model="editData.selectStage" placeholder="请选择">
						    <el-option v-for="item in stageOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p">
						<label for="">以往融资情况:</label>
						<el-select  style="width: 350px;" v-model="editData.selectFinance" placeholder="请选择">
						    <el-option v-for="item in financeOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p" >
						<label for=""><span style="color: red">*</span>资金用途:</label><el-input v-model="editData.uses" placeholder="请详细介绍您希望资金用在什么领域(不超过100个字)" style="width: 350px;"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>发起人姓名:</label><el-input v-model="editData.contactName" placeholder="请填写联系人真实姓名" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>身份证号:</label><el-input v-model="editData.contactIdNum" placeholder="请填写联系人身份证号" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>手机号:</label><el-input v-model="editData.phone" placeholder="请填写联系方式" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for="">微信号:</label><el-input v-model="editData.wechatNum" placeholder="请填写微信号" style="width: 350px"></el-input>
					</p>
				</div>
			</div>
			<!--<editBegField v-show="showOption[0].isShow"></editBegField>
			<editBegPeople v-show="showOption[1].isShow"></editBegPeople>
			<editBegFinance v-show="showOption[2].isShow"></editBegFinance>
			<editBegItem v-show="showOption[3].isShow"></editBegItem>
			<editOfferField v-show="showOption[4].isShow"></editOfferField>
			<editOfferPeople v-show="showOption[5].isShow"></editOfferPeople>
			<editOfferFinance v-show="showOption[6].isShow"></editOfferFinance>
			<editOfferItem v-show="showOption[7].isShow"></editOfferItem>-->
			<p style="text-align: center;line-height: 50px;margin-top: 10px;" v-show="editData.promulgator=='系统发布'">
				<el-button type="primary">保存</el-button>
			</p>
		</div>
	</div>
</template>
<script>
import Sticky from '@/components/Sticky'
import VDistpicker from 'v-distpicker' // 引入城市选择器插件
import editBegField from './components/editBegField.vue' // 引入编辑求 场地
import editBegPeople from './components/editBegPeople.vue' // 引入编辑求 人脉
import editBegFinance from './components/editBegFinance.vue' // 引入编辑求 资金
import editBegItem from './components/editBegItem.vue' // 引入编辑求 项目
import editOfferField from './components/editOfferField.vue' // 引入编辑供 场地
import editOfferPeople from './components/editOfferPeople.vue' // 引入编辑供 人脉
import editOfferFinance from './components/editOfferFinance.vue' // 引入编辑供 资金
import editOfferItem from './components/editOfferItem.vue' // 引入编辑供 项目
export default {
  components: {
    Sticky,
    VDistpicker,
    editBegField,
    editBegPeople,
    editBegFinance,
    editBegItem,
    editOfferField,
    editOfferPeople,
    editOfferFinance,
    editOfferItem
  },
  data() {
    return {
      editData: [], // 查看的资源数据
      dialogImageUrl: '',
      dialogVisible: false,
      citySelect: { province: '福建省', city: '厦门市', area: '集美区' },
      showOption: [
        {
          id: 0,
          isShow: false,
          name: '求场地'
        },
        {
          id: 1,
          isShow: false,
          name: '求人脉'
        },
        {
          id: 2,
          isShow: false,
          name: '求资金'
        },
        {
          id: 3,
          isShow: false,
          name: '求项目'
        },
        {
          id: 4,
          isShow: false,
          name: '供场地'
        },
        {
          id: 5,
          isShow: false,
          name: '供人脉'
        },
        {
          id: 6,
          isShow: false,
          name: '供资金'
        },
        {
          id: 7,
          isShow: false,
          name: '供项目'
        }
      ],
      typeOption: [ // 融资方式选择
        {
          id: 0,
          value: '不限'
        },
        {
          id: 1,
          value: '股权'
        },
        {
          id: 2,
          value: '债券'
        },
        {
          id: 3,
          value: '众筹'
        }
      ],
      tradeOption: [
        {
          id: 0,
          value: '医疗'
        },
        {
          id: 1,
          value: '互联网'
        },
        {
          id: 2,
          value: '文化旅游'
        },
        {
          id: 3,
          value: '高科技'
        },
        {
          id: 4,
          value: '房地产'
        },
        {
          id: 5,
          value: '金融'
        },
        {
          id: 6,
          value: '其他'
        }
      ],
      stageOption: [
        {
          id: 0,
          value: '未开发'
        },
        {
          id: 1,
          value: '原型设计'
        },
        {
          id: 2,
          value: '产品开发'
        },
        {
          id: 3,
          value: '已上线'
        }
      ],
      financeOption: [
        {
          id: 0,
          value: '未融资'
        },
        {
          id: 1,
          value: '天使轮'
        },
        {
          id: 2,
          value: 'A轮'
        },
        {
          id: 3,
          value: 'B轮'
        },
        {
          id: 4,
          value: 'C轮'
        },
        {
          id: 5,
          value: 'C轮以上'
        }
      ],
      tableData: [
        {
          id: 0,
          name: '求两室一厅一套',
          type: '场地',
          promulgator: '系统发布', // 发布者
          commitTime: '1254645645646',
          publishTime: '',
          status: '未审核',
          sort: '求',
          citySelect: { province: '福建省', city: '厦门市', area: '集美区' },
          selectField: '会所',
          selectCost: '1千-2千',
          memberNum: '4',
          fieldIntro: '',
          contact: '张三',
          phone: '15812345678',
          wechatNum: ''
        },
        {
          id: 1,
          name: '求工人15枚',
          type: '人脉',
          promulgator: '', // 发布者
          commitTime: '1254645645646',
          publishTime: '1364564564654',
          status: '发布中',
          sort: '求',
          citySelect: { province: '福建省', city: '厦门市', area: '集美区' },
          selectField: '会所',
          selectCost: '1千-2千',
          memberNum: '4',
          fieldIntro: '',
          contact: '张三',
          phone: '15812345678',
          wechatNum: ''
        },
        {
          id: 2,
          name: '资金',
          type: '资金',
          promulgator: '', // 发布者
          commitTime: '1254645645646',
          publishTime: '',
          status: '未审核',
          sort: '供',
          citySelect: { province: '福建省', city: '厦门市', area: '集美区' },
          selectField: '会所',
          selectCost: '1千-2千',
          memberNum: '4',
          fieldIntro: '',
          contact: '张三',
          phone: '15812345678',
          wechatNum: ''
        },
        {
          id: 3,
          name: '房产',
          type: '项目',
          promulgator: '系统发布', // 发布者
          commitTime: '1254645645646',
          publishTime: '',
          status: '未审核',
          sort: '求',
          citySelect: { province: '福建省', city: '厦门市', area: '集美区' },
          selectField: '会所',
          selectCost: '1千-2千',
          memberNum: '4',
          fieldIntro: '',
          contact: '张三',
          phone: '15812345678',
          wechatNum: ''
        }
      ],
      costOption: [
        {
          id: 0,
          value: '免费'
        },
        {
          id: 1,
          value: '1千以下'
        },
        {
          id: 2,
          value: '1千-2千'
        },
        {
          id: 3,
          value: '2千-5千'
        },
        {
          id: 4,
          value: '5千-1万'
        },
        {
          id: 5,
          value: '1万-2万'
        },
        {
          id: 6,
          value: '2万-5万'
        },
        {
          id: 7,
          value: '5万以上'
        }
      ],
      fieldOption: [
        {
          id: 0,
          value: '不限'
        },
        {
          id: 1,
          value: '会所'
        },
        {
          id: 2,
          value: '户外'
        },
        {
          id: 3,
          value: '山庄'
        },
        {
          id: 4,
          value: '酒店'
        },
        {
          id: 5,
          value: '其他'
        }
      ]
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  },
  mounted() {
    console.log(this.$route.params)
    var str = this.$route.params.sort + this.$route.params.type
    for (var i in this.showOption) {
      if (str === this.showOption[i].name) {
        this.showOption[i].isShow = true
      }
    }
    for (var j in this.tableData) {
      if (Number(this.$route.params.id) === this.tableData[j].id) {
        this.editData = this.tableData[j]
      }
    }
  }
}
</script>
<style scoped>
	p,h3,h1 {margin:0;padding:0}
	.addBox {
		width: 100%;
		height: auto;
		background: #fff;
	}
	.fixTitle{
		font-weight: 500;
		font-size: 14px;
		height: 36px;
		background: #eee;
		border-bottom: 1px solid #ddd;
		width: 100%;
		line-height: 36px;
		padding: 0 10px;
	}
	.title{
		font-size: 18px;
		line-height: 36px;
		padding: 0 10px;
	}
	label {
		font-weight: 500;
		width: 150px;
		display: inline-block;
		text-align: right;
		margin-right: 30px;
	}
	.label-p{
		line-height: 50px;
		overflow: hidden;
	}
</style>